<template>
  <div>
    <!-- 审核 - 选择业务范围 -->
    <el-select
      v-model="value"
      @change="handleChange"
      placeholder="请选择"
      style="width: 100%"
      :multiple="multiple"
      :disabled="disabled"
    >
      <el-option
        v-for="item in options"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      >
      </el-option>
    </el-select>
  </div>
</template>
<script>
import { tbRoleQuery } from "@/api/admin/system/role";
export default {
  data() {
    return {
      value: [],
      options: [],
      listQuery: {
        page: 1,
        limit: 99,
        name: "",
        type: "1",
        king: "1",
      },
    };
  },
  props: {
    defaultValue: String,
    disabled: {
      type: Boolean,
      default: false,
    },
    multiple: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    defaultValue(v) {
      if (this.multiple) {
        if (this.defaultValue) {
          this.value = this.defaultValue.split(",");
        }
      } else {
        this.value = this.defaultValue;
      }
    },
  },
  mounted() {
    if (this.multiple) {
      if (this.defaultValue) {
        this.value = this.defaultValue.split(",");
      }
    } else {
      this.value = this.defaultValue;
    }
    this.getList();
  },
  methods: {
    getList() {
      tbRoleQuery(this.listQuery).then((res) => {
        this.options = res.data.data;
      });
    },
    handleChange(value) {
      this.$emit("emit", value);
    },
  },
};
</script>